import React, { Component } from 'react'
import { register } from '../../request/api';
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/loginbar.css';
export default class Register extends Component {
    constructor() {
        super()
        this.state = {
            user: {
                phone: "",
                nickname: "",
                password: ""
            }
        }
    }
    changeUser(e, type) {
        this.setState({
            user: {
                ...this.state.user,
                [type]: e.target.value
            }
        })

    }
    reg() {
        register(this.state.user).then(res => {
            if (this.state.user.nickname !== "" && this.state.user.phone !== "" && this.state.user.password !== ""){
                if (res.code === 200) {
                    console.log(res);
                    alert("注册成功")
                    
                } else {
                    alert(res.msg)
                }
            }else{
                alert("注册信息不能为空")
            }
               
        })
    }
    toBack(){
        this.props.history.push("/login")
    }
    render() {
        const { user: { phone, nickname, password } } = this.state
        return (
            <>
             <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.toBack()}
                >注册</NavBar>
                <div className="login-mb">
                    <div className="inner">
                        <img src="/images/pic/logo/orange.png" alt="" />

                        <div className="form" action="../index.html">
                            <div className="nickName">
                                <input
                                    type="text"
                                    placeholder="昵称"
                                    pattern="[0-9]{1,4}"
                                    value={nickname}
                                    required
                                    onChange={(e) => this.changeUser(e, "phone")}
                                />
                            </div>
                            <input
                                type="tel"
                                placeholder="手机号"
                                pattern="^1[3,5,9,8,6][0-9]{9}$"
                                value={phone}
                                required
                                onChange={(e) => this.changeUser(e, "nickname")}
                            />
                            <div className="yzm">
                                <input
                                    type="text"
                                    placeholder="密码"
                                    pattern="[0-9]{1,4}"
                                    value={password}
                                    required
                                    onChange={(e) => this.changeUser(e, "password")}
                                />
                            </div>
                            <input type="submit" name="" id="" value="注  册" onClick={() => this.reg()} />
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
